<template>
  <table cellspacing="0" cellpadding="0" border="0" :style="styles">
    <colgroup>
      <col v-for="(column, index) in columns" :width="setCellWidth(column, index, true)">
    </colgroup>
    <thead>
    <tr>
      <th v-for="(column, index) in columns" :class="alignCls(column)">
        <div :class="cellClasses(column)">
          <template v-if="column.type === 'selection'">
            <oolongCheckbox :value="isSelectAll" @on-change="selectAll"></oolongCheckbox>
          </template>
          <template v-else>
            <span v-html="renderHeader(column, index)"></span>
            <span :class="[prefixCls + '-sort']" v-if="column.sortable">
                                <i class="oolong-icon oolong-icon-arrow-up-b" :class="{on: column._sortType === 'asc'}"
                                   @click="handleSort(index, 'asc')"></i>
                                <i class="oolong-icon oolong-icon-arrow-down-b"
                                   :class="{on: column._sortType === 'desc'}"
                                   @click="handleSort(index, 'desc')"></i>
                            </span>
            <oolongPoptip
              v-if="isPopperShow(column)"
              v-model="column._filterVisible"
              placement="bottom"
              @on-popper-hide="handleFilterHide(index)">
                                <span :class="[prefixCls + '-filter']">
                                    <i class="oolong-icon oolong-icon-funnel" :class="{on: column._isFiltered}"></i>
                                </span>
              <div slot="content" :class="[prefixCls + '-filter-list']" v-if="column._filterMultiple">
                <div :class="[prefixCls + '-filter-list-item']">
                  <oolongCheckboxGroup v-model="column._filterChecked">
                    <oolongCheckbox v-for="item in column.filters" :key="item" :label="item.value">{{ item.label }}
                    </oolongCheckbox>
                  </oolongCheckboxGroup>
                </div>
                <div :class="[prefixCls + '-filter-footer']">
                  <oolongButton type="text" size="small" :disabled="!column._filterChecked.length"
                                 @click.native="handleFilter(index)">{{ t('i.table.confirmFilter') }}
                  </oolongButton>
                  <oolongButton type="text" size="small" @click.native="handleReset(index)">{{ t('i.table.resetFilter')
                    }}
                  </oolongButton>
                </div>
              </div>
              <div slot="content" :class="[prefixCls + '-filter-list']" v-else>
                <ul :class="[prefixCls + '-filter-list-single']">
                  <li
                    :class="itemAllClasses(column)"
                    @click="handleReset(index)">{{ t('i.table.clearFilter') }}
                  </li>
                  <li
                    :class="itemClasses(column, item)"
                    v-for="item in column.filters"
                    @click="handleSelect(index, item.value)">{{ item.label }}
                  </li>
                </ul>
              </div>
            </oolongPoptip>
          </template>
        </div>
      </th>
    </tr>
    </thead>
  </table>
</template>
<script>
  import oolongCheckboxGroup from '../checkbox/oolong-checkbox-group.vue';
  import oolongCheckbox from '../checkbox/oolong-checkbox.vue';
  import oolongPoptip from '../poptip/oolong-poptip.vue';
  import oolongButton from '../button/oolong-button.vue';
  import Mixin from './mixin';
  import Locale from '../../mixins/locale';

  export default {
    name: 'oolongTableHead',
    mixins: [Mixin, Locale],
    components: {oolongCheckboxGroup, oolongCheckbox, oolongButton, oolongPoptip},
    props: {
      prefixCls: String,
      styleObject: Object,
      columns: Array,
      objData: Object,
      data: Array,    // rebuildData
      columnsWidth: Object,
      fixed: {
        type: [Boolean, String],
        default: false
      }
    },
    computed: {
      styles () {
        const style = Object.assign({}, this.styleObject);
        const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + this.$parent.scrollBarWidth;
        style.width = `${width}px`;
        return style;
      },
      isSelectAll () {
        let isSelectAll = true;
        if (!this.data.length) isSelectAll = false;
        for (let i = 0; i < this.data.length; i++) {
          if (!this.objData[this.data[i]._index]._isChecked && !this.objData[this.data[i]._index]._isDisabled) {
            isSelectAll = false;
            break;
          }
        }

        return isSelectAll;
      }
    },
    methods: {
      cellClasses (column) {
        return [
          `${this.prefixCls}-cell`,
          {
            [`${this.prefixCls}-hidden`]: !this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right')
          }
        ];
      },
      itemClasses (column, item) {
        return [
          `${this.prefixCls}-filter-select-item`,
          {
            [`${this.prefixCls}-filter-select-item-selected`]: column._filterChecked[0] === item.value
          }
        ];
      },
      itemAllClasses (column) {
        return [
          `${this.prefixCls}-filter-select-item`,
          {
            [`${this.prefixCls}-filter-select-item-selected`]: !column._filterChecked.length
          }
        ];
      },
      renderHeader (column, $index) {
        if ('renderHeader' in this.columns[$index]) {
          return this.columns[$index].renderHeader(column, $index);
        } else {
          return column.title || '#';
        }
      },
      selectAll () {
        const status = !this.isSelectAll;
        this.$parent.selectAll(status);
      },
      handleSort (index, type) {
        if (this.columns[index]._sortType === type) {
          type = 'normal';
        }
        this.$parent.handleSort(index, type);
      },
      handleFilter (index) {
        this.$parent.handleFilter(index);
      },
      handleSelect (index, value) {
        this.$parent.handleFilterSelect(index, value);
      },
      handleReset (index) {
        this.$parent.handleFilterReset(index);
      },
      handleFilterHide (index) {
        this.$parent.handleFilterHide(index);
      }
    }
  };
</script>
